<template>
    <div class="home">
        <!-- 顶部栏 -->
        <div class="header">
            <div class="header-box">
                <!-- 微信读书图标 -->
                <div class="header-title">
                    <!--                    <img src="/images/favicon.png" alt="">-->
                </div>

                <!-- 搜索框 -->
                <div class="header-search">
                    <input type="text" placeholder="搜索" class="search-input"/>
                </div>

                <!-- 最近热搜 -->
                <div class="recent-search">
                    <div class="search-items">
                        <span class="title">最近热搜：</span>
                        <span v-for="(item, index) in recentBooks" :key="index" class="search-item">{{item}}</span>
                    </div>
                </div>
            </div>
        </div>

        <!--        内容区-->
        <div class="content">

            <!--            我的书架-->
            <div class="section-header">
                <div class="section-header-title" @click="goToBookshelf">
                    我的书架
                    <div class="section-header-icon">
                    </div>
                </div>


                <!--                头像-->
                <div style="height: 32px;width: 32px;padding-right: 15px;">
                    <img src="/images/96.jfif"
                         alt="">
                </div>
            </div>

            <!--            我的书架最近四本-->
            <div style="display: flex">

                <div v-for="(book, index) in shelfBooks" :key="index" class="shelf-card" @click="goToReader(book.id)">
                    <div style="align-items: center;display: flex;">
                        <div class="shelf-card-cover">
                            <img :src="book.cover" alt="">

                            <!--                                书籍封面边界装饰-->
                            <span class="borderDecor">
                        </span>

                        </div>
                        <div class="shelf-card-content">
                            <div class="shelf-card-title">{{ book.title }}</div>
                            <div class="shelf-card-author">{{ book.author }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!--            猜你喜欢-->
            <div class="section-content">
                <div class="section-content-title">
                    猜你喜欢
                </div>

                <div class="section-content-change" @click="Onchange">
                    换一批
                </div>
            </div>

            <!--            猜你喜欢四本-->
            <div style="display: flex;">

                <!--                大卡片-->
                <div v-for="(book, index) in recommendedBooks" :key="index" class="content-card">
                    <div style="align-items: center;display: flex;flex-direction: column;justify-content: space-between;">
                        <div class="content-card-cover">
                            <img style="max-width: 100%; max-height: 100%;" :src="book.cover" alt="">
                        </div>
                    </div>
                    <div style="margin-top: 32px">
                        <div style="font-size: 18px;font-weight: 500;line-height: 22px;overflow: hidden;text-align:center;line-height: 42px">
                            {{ book.title }}
                        </div>
                        <div style="font-size: 14px;font-weight: 500;line-height: 22px;overflow: hidden;text-align:center;color:#717882;line-height: 42px">
                            {{ book.author }}
                        </div>

                        <div style="font-size: 13px;font-weight: 500;line-height: 22px;overflow: hidden;text-align:center;color:#717882;line-height: 42px">
                            {{ book.recommendation }}
                        </div>


                    </div>

                </div>

            </div>

            <!--            榜单-->
            <div>
                <div class="section-rank">
                    <div class="section-content-title">
                        榜单
                    </div>
                </div>

                <div style="display: flex;">
                    <!--                大卡片-->
                    <!--                    top50飙升榜-->
                    <div class="rank-card">

                        <!--                        卡片顶部-->
                        <div class="rank-header" @click="handleRankClick('/api/category-books')">

                            <div style="height: 32px">

                                <img src="https://weread-1258476243.file.myqcloud.com/assets/ranklist.rising.chart_title.YqPFOS9Gin.png"
                                     alt="" style="max-width: 100%; max-height: 100%;">
                            </div>

                            <div style="font-size: 12px;line-height: 17px;color:#FF4593;margin-top: 8px;">
                                微信读书用户近期热读的出版书
                            </div>
                        </div>

                        <div style="display: flex;flex-wrap: wrap;">

                            <!--                            小卡片-->
                            <div class="bookInfoDiv"
                                 v-for="(book, index) in miniBooks" :key="index"
                                 @click="handleRankClick('/api/category-books')">

                                <div class="minibookInfo">

                                    <!-- 图片 -->
                                    <div style="height: 92px;width: 64px;">
                                        <img :src="book.cover" alt="" style="max-width:100%;max-height: 100%;">
                                    </div>

                                    <div class="book-title">

                                        <!-- 序号 -->
                                        <div style="font-family: DIN, -apple-system, SF UI Text, PingFang SC, Lucida Grande, STheiti, Microsoft YaHei, sans-serif; margin-right: 8px;">
                                            {{ index + 1 }}
                                        </div>

                                        <div style="display: flex;flex: 1;justify-content: space-between;">
                                            <div style="flex: 1;">

                                                <!-- 书名 -->
                                                <div class="bookInfo-title">
                                                    <span>{{ book.title }}</span>
                                                </div>

                                                <!-- 作者 -->
                                                <div class="bookInfo-author">
                                                    {{ book.author }}
                                                </div>

                                                <!-- 推荐值 -->
                                                <div class="bookInfo-recommend">
                                                    <div style="align-items: center; display: flex; font-size: 13px; justify-content: center; line-height: 18px; margin-top: 7px;">
                                                        推荐值 {{ book.recommendationRate }}%
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>

                        <div>

                            <div class="rank-footer">

                                <div class="rank-footer-lang">
                                    查看全部
                                </div>

                                <!--                                图标-->
                                <div class="rank-footer-icon">

                                </div>
                            </div>
                        </div>


                    </div>

                    <!--                    top50新书榜-->
                    <div class="rank-card" @click="handleRankClick('/api/new-books')">

                        <!--                        卡片顶部-->
                        <div class="rank-header">

                            <div style="height: 32px">

                                <img src="https://weread-1258476243.file.myqcloud.com/assets/ranklist.newbook.chart_title.GWZVW5nl3Z.png"
                                     alt="" style="max-width: 100%; max-height: 100%;">
                            </div>

                            <div style="font-size: 12px;line-height: 17px;color:#FFB341;margin-top: 8px;">
                                最近 90 天出版的热门书籍
                            </div>
                        </div>

                        <div style="display: flex;flex-wrap: wrap;">

                            <!--                            小卡片-->
                            <div class="bookInfoDiv"
                                 v-for="(book, index) in miniNewBooks" :key="index"
                                 @click="handleRankClick('/api/new-books')">

                                <div class="minibookInfo">

                                    <!-- 图片 -->
                                    <div style="height: 92px;width: 64px;">
                                        <img :src="book.cover" alt="" style="max-width:100%;max-height: 100%;">
                                    </div>

                                    <div class="book-title">

                                        <!-- 序号 -->
                                        <div style="font-family: DIN, -apple-system, SF UI Text, PingFang SC, Lucida Grande, STheiti, Microsoft YaHei, sans-serif; margin-right: 8px;">
                                            {{ index + 1 }}
                                        </div>

                                        <div style="display: flex;flex: 1;justify-content: space-between;">
                                            <div style="flex: 1;">

                                                <!-- 书名 -->
                                                <div class="bookInfo-title">
                                                    <span>{{ book.title }}</span>
                                                </div>

                                                <!-- 作者 -->
                                                <div class="bookInfo-author">
                                                    {{ book.author }}
                                                </div>

                                                <!-- 推荐值 -->
                                                <div class="bookInfo-recommend">
                                                    <div style="align-items: center; display: flex; font-size: 13px; justify-content: center; line-height: 18px; margin-top: 7px;">
                                                        推荐值 {{ book.recommendationRate }}%
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>

                        <div>

                            <div class="rank-footer">

                                <div class="rank-footer-lang">
                                    查看全部
                                </div>

                                <!--                                图标-->
                                <div class="rank-footer-icon">

                                </div>
                            </div>
                        </div>


                    </div>

                </div>

                <div style="display: flex;">
                    <!--                大卡片-->
                    <!--                    top200总榜-->
                    <div class="rank-card">

                        <!--                        卡片顶部-->
                        <div class="rank-header" @click="handleRankClick('/api/top200')">

                            <div style="height: 32px">

                                <img src="https://weread-1258476243.file.myqcloud.com/assets/ranklist.all.chart_title.JPnYFfuPbm.png"
                                     alt="" style="max-width: 100%; max-height: 100%;">
                            </div>

                            <div style="font-size: 12px;line-height: 17px;color:#39cfff;margin-top: 8px;">
                                微信读书用户最喜爱的出版书
                            </div>
                        </div>

                        <div style="display: flex;flex-wrap: wrap;">

                            <!--                            小卡片-->
                            <div class="bookInfoDiv"
                                 v-for="(book,index) in miniAllBooks" :key="index"
                                 @click="handleRankClick('/api/top200')">

                                <div class="minibookInfo">

                                    <!--                                    图片-->
                                    <div style="height: 92px;width: 64px;">
                                        <img :src="book.cover"
                                             alt="" style="max-width:100%;max-height: 100%;">
                                    </div>

                                    <div class="book-title">

                                        <div style="font-family: DIN, -apple-system, SF UI Text, PingFang SC, Lucida Grande, STheiti, Microsoft YaHei, sans-serif;
    margin-right: 8px;">
                                            {{index +1}}
                                        </div>

                                        <div style="display: flex;flex: 1;justify-content: space-between;">
                                            <div style="flex: 1;">

                                                <div class="bookInfo-title">
<span>
   {{book.title}}
</span>
                                                </div>

                                                <div class="bookInfo-author">
                                                    {{ book.author }}
                                                </div>

                                                <div class="bookInfo-recommend">

                                                    <div style="align-items: center;
    display: flex;
    font-size: 13px;
    justify-content: center;
    line-height: 18px;
    margin-top: 7px;
   ">
                                                        推荐值 {{ book.recommendationRate }}%
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>

                        <div>

                            <div class="rank-footer">

                                <div class="rank-footer-lang">
                                    查看全部
                                </div>

                                <!--                                图标-->
                                <div class="rank-footer-icon">

                                </div>
                            </div>
                        </div>


                    </div>

                    <!--                大卡片-->
                    <!--                    神作榜-->
                    <div class="rank-card">

                        <!--                        卡片顶部-->
                        <div class="rank-header" @click="handleRankClick('/api/masterpiece-books')">

                            <div style="height: 32px">

                                <img src="https://weread-1258476243.file.myqcloud.com/assets/ranklist.newrating_publish.chart_title.OOrrOhqu7u.png"
                                     alt="" style="max-width: 100%; max-height: 100%;">
                            </div>

                            <div style="font-size: 12px;line-height: 17px;color:#E8B142;margin-top: 8px;">
                                超过500人点评，推荐值≥90%的出版书
                            </div>
                        </div>

                        <div style="display: flex;flex-wrap: wrap;">

                            <!--                            小卡片-->
                            <div class="bookInfoDiv"
                                 v-for="(book,index) in miniBestBooks" :key="index"
                                 @click="handleRankClick('/api/masterpiece-books')">

                                <div class="minibookInfo">

                                    <!--                                    图片-->
                                    <div style="height: 92px;width: 64px;">
                                        <img :src="book.cover"
                                             alt="" style="max-width:100%;max-height: 100%;">
                                    </div>

                                    <div class="book-title">

                                        <div style="font-family: DIN, -apple-system, SF UI Text, PingFang SC, Lucida Grande, STheiti, Microsoft YaHei, sans-serif;
    margin-right: 8px;">
                                            {{index +1}}
                                        </div>

                                        <div style="display: flex;flex: 1;justify-content: space-between;">
                                            <div style="flex: 1;">

                                                <div class="bookInfo-title">
<span>
   {{book.title}}
</span>
                                                </div>

                                                <div class="bookInfo-author">
                                                    {{ book.author }}
                                                </div>

                                                <div class="bookInfo-recommend">

                                                    <div style="align-items: center;
    display: flex;
    font-size: 13px;
    justify-content: center;
    line-height: 18px;
    margin-top: 7px;
   ">
                                                        推荐值 {{ book.recommendationRate }}%
                                                    </div>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>

                        <div>

                            <div class="rank-footer">

                                <div class="rank-footer-lang">
                                    查看全部
                                </div>

                                <!--                                图标-->
                                <div class="rank-footer-icon">

                                </div>
                            </div>
                        </div>


                    </div>

                </div>

            </div>

            <!--            分类-->
            <div class="categor-list">
                <div class="section-content-title">
                    分类
                </div>

                <div style="color: #5d646e;padding-right: 15px;cursor: pointer"
                     @click="handleRankClick('/api/category-books')">
                    查看全部 · {{ totalCategories }} 个
                </div>

            </div>

            <!--                分类列表-->
            <div class="category-list-content" style="display: flex;flex-wrap: wrap;">

                <!--                分类卡片-->
                <div class="category-list-card" v-for="(category, index) in categories" :key="category.id">
                    <!--                    图片-->
                    <div class="category-cover">
                        <img :src="category.image" alt="" style="max-height: 100%;max-width: 100%">
                    </div>

                    <div style="margin-left: 16px;">
                        <div class="category-name">
                            {{ category.name }}
                        </div>

                        <div class="category-count">
                            {{ category.bookCount }} 本书籍
                        </div>

                    </div>
                </div>

            </div>

            <!--            footer-->
            <div class="footer-wrapper">
                <div class="footer-copyright">
                    © 1998 - 2025 Tencent Inc. All Rights Reserved
                </div>

                <div class="footer-actions">
                    用户协议 隐私政策 帮助与反馈
                </div>
            </div>


        </div>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: "Home",
        data() {
            return {
                recentBooks: [],  // 热搜书名
                shelfBooks: [],   //我的书架
                recommendedBooks: [],   //猜你喜欢
                miniBooks: [],  // 飙升榜
                miniNewBooks: [],  //新书榜
                miniAllBooks: [],  //总榜
                miniBestBooks: [],  //神作榜

                categories: [],  // 存储分类数据
                totalCategories: 0  // 存储分类总数
            };
        },
        mounted() {
            // 组件挂载后获取数据
            this.fetchRecentSearch(); // 最近热搜
            this.fetchShelfBooks();  //我的书架
            this.wfetchRecommendedBooks();  //猜你喜欢
            this.fetchMiniBooks();  //50飙升榜小卡片
            this.fetchminiNewBooks();  //50新书榜
            this.fetchminiAllBooks();  //总榜
            this.fetchminiBestBooks();  //神作榜
            this.fetchCategories();  // 加载分类数据
        },

        methods: {

            // 最近热搜
            fetchRecentSearch() {
                axios.get('/api/recent-search')
                    .then(response => {
                        if (response.data.code === 200) {
                            this.recentBooks = response.data.data;
                            console.log("最近热搜", this.recentBooks)
                        }
                    })
                    .catch(error => {
                        console.error('获取热搜数据失败:', error);
                    });
            },

            // 我的书架
            fetchShelfBooks() {
                axios.get('/api/shelf-books')
                    .then(response => {
                        if (response.data.code === 200) {
                            // 只展示前四条
                            this.shelfBooks = response.data.data.slice(0, 4);
                            console.log("我的书架", this.shelfBooks);
                        }
                    })
                    .catch(error => console.error('获取书架数据失败:', error));
            },

            // 猜你喜欢
            wfetchRecommendedBooks() {
                axios.get('/api/recommended-books')
                    .then(response => {
                        if (response.data.code === 200) {
                            this.recommendedBooks = response.data.data;
                            console.log("猜你喜欢", this.recommendedBooks)
                        }
                    })
                    .catch(error => console.error('获取推荐书籍数据失败:', error));
            },

            // 50飙升榜小卡片
            fetchMiniBooks() {
                axios.get('/api/category-books')
                    .then(response => {
                        if (response.data.code === 200) {
                            this.miniBooks = response.data.data.slice(0, 6);
                            console.log("50飙升榜", this.miniBooks)

                        }
                    })
                    .catch(error => console.error('获取小卡片数据失败:', error));
            },

            // 50新书榜
            fetchminiNewBooks() {
                axios.get('/api/new-books')
                    .then(response => {
                        if (response.data.code === 200) {
                            this.miniNewBooks = response.data.data.slice(0, 6);
                            console.log("50新书榜", this.miniNewBooks)

                        }
                    })
                    .catch(error => console.error('获取小卡片数据失败:', error));
            },

            // 总榜
            fetchminiAllBooks() {
                axios.get('/api/top200')
                    .then(response => {
                        if (response.data.code === 200) {
                            this.miniAllBooks = response.data.data.slice(0, 6);
                            console.log("总榜", this.miniAllBooks)

                        }
                    })
                    .catch(error => console.error('获取小卡片数据失败:', error));
            },
            // 神作榜
            fetchminiBestBooks() {
                axios.get('/api/masterpiece-books')
                    .then(response => {
                        if (response.data.code === 200) {
                            this.miniBestBooks = response.data.data.slice(0, 6);
                            console.log("神作榜", this.miniBestBooks)

                        }
                    })
                    .catch(error => console.error('获取小卡片数据失败:', error));
            },

            // 加载分类数据
            fetchCategories() {
                axios.get('/api/categories')
                    .then(response => {
                        if (response.data.code === 200) {
                            this.categories = response.data.data;  // 更新分类数据
                            this.totalCategories = response.data.data.length;  // 更新总分类数
                            console.log("分类数据", this.categories)
                        }
                    })
                    .catch(error => console.error('获取分类数据失败:', error));
            },

            // 跳转到我的书架页面
            goToBookshelf() {
                this.$router.push('/shelf');
            },

            // 跳转到阅读页
            goToReader(bookId) {
                console.log('点击的书籍 ID:', bookId);
                this.$router.push({path: '/reader', query: {id: bookId}});
            },

            // 换一批
            Onchange() {
                this.fetchRecommendedBooks()
            },

            // 跳转到分类页面
            // goTocategory() {
            //     this.$router.push('/category');
            // },

            // handleRankClick() {
            //     const apiUrl = '/api/new-books';
            //     this.$router.push({name: 'category', query: {apiUrl}});
            // }

            // 携带参数跳转category页面
            handleRankClick(apiUrl) {
                this.$router.push({name: 'category', query: {apiUrl}});
            }
        }
    };
</script>

<style scoped>

    .home {
        background-color: #f4f5f7;
        min-height: 100vh;
    }

    /* 顶部栏样式 */
    .header {
        width: 100%;
        height: 280px;
        background-color: #edeef0;
        position: relative; /* 相对定位，用于子元素的绝对定位 */
        box-sizing: border-box;
    }

    .header-box {
        position: relative; /* 父容器设为相对定位 */
        max-width: 740px; /* 限制最大宽度 */
        width: 100%; /* 宽度为100% */
        height: 228px; /* 固定高度 */
        margin: 0 auto; /* 水平居中 */
    }

    .header-title {
        /*background: url(https://cdn.weread.qq.com/web/wrweb-next/_nuxt/img_logo.Egsq9YBR.png) no-repeat;*/
        background: url(/public/images/icon02.png) no-repeat;
        background-size: 100%;
        height: 36px;
        width: 160px;
        position: absolute; /* 绝对定位 */
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-bottom: 28px;
    }

    /* 搜索框样式 */
    .header-search {
        position: absolute; /* 绝对定位 */
        top: 50%;
        left: 49%;
        transform: translateX(-50%); /* 精准居中 */
        width: 94%; /* 设置宽度为94% */
    }

    .search-input {
        width: 100%; /* 填满父容器 */
        /*padding: 10px;*/
        border: 1px solid #ccc;
        border-radius: 61px;
        font-size: 14px;
        outline: none;
        padding: 10px 10px 10px 20px;

    }

    .search-input::placeholder {
        color: #999;
    }

    /* 最近热搜部分 */
    .recent-search {
        position: absolute;
        top: 75%; /* 放置在搜索框下方 */
        left: 50%; /* 水平居中 */
        transform: translateX(-50%); /* 精准居中 */
        width: 100%; /* 父容器宽度 */
        padding-top: 10px;
        text-align: center; /* 文本居中 */
    }

    .recent-search .title {
        color: #858c9e;
        margin-top: 7px;
        font-size: 15px;
        line-height: 20px;
    }

    .search-items {
        display: flex;
        justify-content: center;
        gap: 15px; /* 设置每个搜索项之间的间距 */
    }

    .search-item {
        background-color: #e5e6e8;
        border-radius: 18px;
        color: #5d646e;
        cursor: pointer;
        transition: background-color 0.3s;
        padding: 6px 14px;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    .search-item:hover {
        background-color: #ddd;
    }

    .content {
        margin: 0 auto;
        width: 1200px;
    }

    /*我的书架*/
    .section-header {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 50px 8px 20px;
    }

    /*猜你喜欢*/
    .section-content {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 50px 8px 20px;
    }

    /*分类*/
    .categor-list {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 50px 8px 20px;
    }

    .section-rank {
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 50px 8px 20px;
    }

    .section-header-title {
        align-items: center;
        display: flex;
        font-family: FZLTHProGBK_SB, -apple-system, SF UI Text, PingFang SC, Lucida Grande, STheiti, Microsoft YaHei, sans-serif;
        font-size: 20px;
        line-height: 28px;
        font-weight: 600;
        cursor: pointer;

    }

    .section-content-title {
        font-family: FZLTHProGBK_SB, -apple-system, SF UI Text, PingFang SC, Lucida Grande, STheiti, Microsoft YaHei, sans-serif;
        font-size: 18px;
    }

    .section-content-change {
        color: #1b88ee;
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        padding-right: 15px;
    }

    .section-header img {
        align-items: center;
        background: linear-gradient(180deg, #caccce, #adb4be), rgba(0, 0, 0, .2);
        border-radius: 50%;
        color: #fff;
        display: flex;
        font-family: SourceHanSerifCN-Bold, -apple-system, SF UI Text, PingFang SC, Lucida Grande, STheiti, Microsoft YaHei, sans-serif;
        font-size: 12px;
        height: 100%;
        justify-content: center;
        line-height: 17px;
        vertical-align: top;
        width: 100%;
    }

    .shelf-card {
        background: #ffffff;
        border-radius: 12px;
        box-sizing: border-box;
        cursor: pointer;
        flex: 1;
        margin-right: 24px;
        max-width: calc(25% - 18px);
        overflow: hidden;
        padding: 20px;
        transition: transform .3s ease;
    }

    .shelf-card:hover {
        transform: scale(1.05);
    }

    .shelf-card-cover {
        flex-shrink: 0;
        height: 121px;
        width: 84px;
    }

    /*猜你喜欢*/
    .content-card {
        background: #ffffff;
        border-radius: 12px;
        box-sizing: border-box;
        cursor: pointer;
        height: 365px;
        padding: 40px 20px;
        transition: transform .3s;
        width: 282px;
        margin-right: 24px;
    }

    .content-card:hover {
        transform: scale(1.05);
    }

    .content-card-cover {
        height: 139px;
        width: 96px;
    }

    .shelf-card-cover {
        flex-shrink: 0;
        height: 121px;
        width: 84px;
        position: relative;
    }

    .shelf-card img {
        background-color: #d8d8d8;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        vertical-align: top;
        width: 100%;
        height: 100%;
    }

    .shelf-card-content {
        flex: 1;
        margin-left: 20px;
        overflow: hidden;
    }

    .shelf-card-title {
        color: black;
        font-size: 16px;
        line-height: 22px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
        word-wrap: normal;
        font-weight: 500;
    }

    .shelf-card-author {
        color: #717892;
        font-size: 14px;
        line-height: 20px;
        margin-top: 7px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
        word-wrap: normal;
    }

    /*榜单*/
    .rank-list {
        margin-right: 24px;
        background-color: white;
        border-radius: 12px;
        box-shadow: 0 4px 60px rgba(0, 0, 0, .03);
        box-sizing: border-box;
        margin-bottom: 24px;
        padding: 4px 0;
        width: calc(50% - 12px);
    }

    .rank-card {
        margin-right: 24px;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 60px rgba(0, 0, 0, .03);
        box-sizing: border-box;
        margin-bottom: 24px;
        padding: 4px 0;
        width: calc(50% - 12px);
        /*height: 300px;*/
    }

    .rank-header {
        /*底部分割线*/
        border: solid rgba(0, 0, 0, .1);
        border-radius: 0;
        border-width: 0 0 1px;
        display: block;
        margin: 0 20px;
        padding: 20px 0;
    }

    .rank-header:hover {
        cursor: pointer;
    }

    .bookInfoDiv {
        padding-left: 16px;
        padding-right: 20px;
        width: 43.5%;
    }

    .bookInfoDiv:hover {
        background-color: #e8f3fd;
        cursor: pointer;
    }

    /*榜单小卡片*/
    .minibookInfo {
        box-sizing: border-box;
        height: 132px;
        padding: 20px 0;
        align-items: center;
        border: solid rgba(0, 0, 0, .1);
        border-radius: 0;
        border-width: 0 0 1px;
        display: flex;
    }

    .book-title {
        align-items: start;
        color: #212832;
        display: flex;
        flex: 1;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
        margin-left: 16px;
    }

    .bookInfo-title {
        align-items: center;
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 6px;
    }

    .bookInfo-title span {
        display: -webkit-box;
        display: -moz-box;
        height: 22px;
        line-height: 22px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -moz-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        -webkit-text-size-adjust: none;
        box-orient: vertical;
        height: auto;
        max-height: 22px;
    }

    .bookInfo-author {
        color: #858c96;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        width: -moz-fit-content;
        width: fit-content;
    }

    .bookInfo-recommend {
        align-items: center;
        color: #99a0aa;
        display: flex;
        font-family: DIN, -apple-system, SF UI Text, PingFang SC, Lucida Grande, STheiti, Microsoft YaHei, sans-serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }

    /*查看全部*/
    .rank-footer {
        align-items: center;
        color: #5d646e;
        cursor: pointer;
        display: flex;
        font-size: 15px;
        line-height: 21px;
        padding: 16px 20px;
    }

    .rank-footer-lang {
        align-items: center;
        color: #5d646e;
        cursor: pointer;
        display: flex;
        font-size: 15px;
        line-height: 21px;
    }

    .rank-footer-icon {
        background: url() no-repeat;
        background-size: 100%;
        height: 11px;
        margin-left: 8px;
        transform: translateY(2px);
        width: 6px;
    }

    /*我的书架图标*/
    .section-header-icon {
        background: url() no-repeat;
        background-size: 100%;
        cursor: pointer;
        height: 12px;
        margin-left: 6px;
        width: 8px;
        margin-top: 4px;
    }

    /*分类卡片*/
    .category-list-card {
        align-items: center;
        background: #ffffff;
        border-radius: 12px;
        box-sizing: border-box;
        cursor: pointer;
        display: flex;
        margin-bottom: 24px;
        margin-right: 24px;
        padding: 20px;
        transition: transform .3s;
        width: calc(23%);
    }

    .category-list-card:hover {
        transform: scale(1.05);
        /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); !* 添加阴影效果 *!*/
    }

    /*分类图片*/
    .category-cover {
        height: 69px;
        width: 48px;
    }

    /*分类名*/
    .category-name {
        color: #212832;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
    }

    /*分类下数量*/
    .category-count {
        color: #858c96;
        font-family: DIN-Regular, -apple-system, SF UI Text, PingFang SC, Lucida Grande, STheiti, Microsoft YaHei, sans-serif;
        font-size: 14px;
        line-height: 20px;
        margin-top: 6px;
    }

    .footer-wrapper {
        color: #858c96;
        padding: 48px 0;
        text-align: center;
    }

    .footer-copyright {
        font-family: DIN-Regular, -apple-system, SF UI Text, PingFang SC, Lucida Grande, STheiti, Microsoft YaHei, sans-serif;
        font-size: 14px;
        line-height: 17px;
    }

    .footer-actions {
        align-items: center;
        cursor: pointer;
        display: flex;
        font-size: 13px;
        justify-content: center;
        line-height: 18px;
        margin-top: 6px;
    }


</style>
